<template>
  <div class="image-item">
    <transition mode="out-in" appear
      enter-active-class="animated zoomIn"
      leave-active-class="animated zoomOut"
    >
      <img :src="currData" class="item-bg" :key="currData">
    </transition>
  </div>
</template>
<script>
export default {
  name: 'ImageSwiper',
  props: {
    dataList: Array
  },
  data () {
    return {
      pageIndex: 0,
      timer: null
    }
  },
  computed: {
    pageTotal () {
      return this.dataList.length
    },
    currData () {
      return this.dataList[this.pageIndex]
    }
  },
  methods: {
    addIndex () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let this_ = this
      this.timer = setTimeout(function () {
        if (this_.pageIndex < this_.pageTotal - 1) {
          this_.pageIndex++
        } else {
          clearTimeout(this.timer)
          this_.pageIndex = 0
          this_.$emit('changeIndex')
          return
        }
        this_.addIndex()
      }, 15000)
    }
  },
  activated () {
    this.addIndex()
  },
  mounted () {
  }
}
</script>
<style lang="stylus" scoped>
  .image-item
    width: 100%
    height: 300px
    .item-bg
      position: absolute
      left: 0
      top: 0
      width: 100%
</style>
